<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>出借账单详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>标的名称</ion-label>
      <span slot="end">{{data['title']}}</span>
    </ion-item>
    <ion-item>
      <ion-label>期数</ion-label>
      <span slot="end">{{data['period']}}/{{totalPeriod}}</span>
    </ion-item>
    <ion-item>
      <ion-label>应收本息</ion-label>
      <ion-text slot="end" color="tertiary">
        {{data['principalInterest'] || data['expectedArrival'] | number:'.2-2'}}元
      </ion-text>
    </ion-item>

    <ion-item>
      <ion-label>
        <dl class="amount-item">
          <dt>本金</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['receiveCorpus'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>利息</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['receiveInterest'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>加息利息</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['coup_interest'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>违约金</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['penalty'] || 0 | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>服务费</dt>
          <dd>
            <ion-text>
              {{data['loanFee'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label>实际到账</ion-label>
      <ion-text slot="end" color="tertiary">
        {{data['principalInterest'] || data['expectedArrival'] | number:'.2-2'}}元
      </ion-text>
    </ion-item>
    <ion-item>
      <ion-label>到期时间</ion-label>
      <span slot="end">
        {{data['receiveTime'] | date:'yyyy-MM-dd'}}
      </span>
    </ion-item>
    <ion-item>
      <ion-label>回款时间</ion-label>
      <span slot="end">
        {{!data['realReceiveTime'] ? '---' : data['realReceiveTime'] | date:'yyyy-MM-dd'}}
      </span>
    </ion-item>
    <ion-item>
      <ion-label>状态</ion-label>
      <ion-text slot="end" color="tertiary">
        {{data['statusStr']}}
      </ion-text>
    </ion-item>
  </ion-list>
</ion-content>
